<!--{template pc/frame/header_simple_start}-->
<script type="text/javascript" src="{MOD_PATH}/js/pc/plug/sortable.min.js?{VERHASH}"></script>
<link rel="stylesheet" type="text/css" href="{MOD_PATH}/css/pc/admin.css?{VERHASH}"/>
<!--{template pc/frame/header_simple_end}-->
<div id="dzzoffice">
	<el-container>
		<el-header height="auto" style="padding: 0;z-index: 10;">
			<page-header :isscreenshow="false"></page-header>
		</el-header>
		<el-container>
		    <el-aside width="260px">
				<!--{template pc/page/adminLeft}-->
			</el-aside>
		    <el-main>
				<div class="page-content">
					<div id="center_title">筛选器设置</div>
					<el-scrollbar class="page-component__scroll">
						<div class="content" style="padding: 16px 25px;">
							<el-checkbox-group v-model="formdata.checkeds" @change="handleChange">
								<div id="SortableBox">
									<div class="lable-list" v-for="item in formdata.datas" :key="item.key">
										<el-checkbox border :label="item.key" name="type">{{item.text}}</el-checkbox>
									</div>
								</div>
							</el-checkbox-group>
						</div>
					</el-scrollbar>
				</div>
						
			</el-main>
		  </el-container>
	</el-container>
</div>
<!--{template pc/components/headerAdmin/index}-->
<script type="text/javascript">
	new Vue({
		el: '#dzzoffice',
		data() {
			return {
				formdata:{
					checkeds:[],
					datas:[]
				},
				screens:[
					// {key:'classify',text:'分类',checked:0},
					{key:'tag',text:'标签',checked:0},
					{key:'color',text:'颜色',checked:0},
					{key:'link',text:'链接',checked:0},
					{key:'desc',text:'注释',checked:0},
					{key:'duration',text:'时长',checked:0},
					{key:'size',text:'尺寸',checked:0},
					{key:'ext',text:'类型',checked:0},
					{key:'shape',text:'形状',checked:0},
					{key:'grade',text:'评分',checked:0},
					{key:'btime',text:'添加时间',checked:0},
					{key:'dateline',text:'修改日期',checked:0},
					{key:'mtime',text:'创建日期',checked:0},
				],
			}
		},
		created() {
			var param = $data;
			var checks = [];
			if(param&&param.length){
				for(var x in param){
					if(parseInt(param[x].checked)){
						checks.push(param[x].key);
					}
				}
			}else{
				param = JSON.parse(JSON.stringify(this.screens));
			}
			this.formdata.checkeds = checks;
			this.formdata.datas = param;
		},
		methods: {
			
			handleRouter(type){
				window.location.href = MOD_URL+'&op=admin&do='+type;
			},
			handleChange(){
				this.handleSubmit();
			},
			handleSubmit() {
				var self = this;
				var str = {
					pichomefilterfileds:[]
				}
				for(var index in self.formdata.datas){
					var ditem = self.formdata.datas[index];
					if(self.formdata.checkeds.indexOf(ditem.key)>-1){
						ditem['checked'] = 1;
					}else{
						ditem['checked'] = 0;
					}
					str.pichomefilterfileds.push(ditem);
				}
				$.post(MOD_URL+'&op=admin&do=fileterset',{
					settingsubmit:true,
					formhash:'{FORMHASH}',
					settingnew:str,
				},function(data){
					if(data){
					}else{
						self.$message.error('保存失败');
					}
				},'json');
			}
		},
		mounted() {
			var _this = this;
			var el = document.getElementById('SortableBox');
			//设置配置
			var ops = {
				animation: 200,
				//拖动结束
				onEnd: function ({ newIndex, oldIndex }) {
					var val = _this.formdata.datas[oldIndex]
					_this.formdata.datas.splice(oldIndex, 1)
					_this.formdata.datas.splice(newIndex, 0, val)
					_this.handleSubmit();
				},};
			//初始化
			var sortable = Sortable.create(el, ops);
		}
	})
</script>

<!--{template pc/frame/footer_simple}-->
